<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

    // 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

    // 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。


    class Cat {
        // 构造函数相关的内容 直接写在constructor 中
        constructor(name, color) {
            this.name = name;
            this.color = color;
        }

        // 定义静态属性和方法只需 加一个关键词 static  => 静态方法(构造函数自己使用 Array.isArray Array.from  String.formCharCode  Promise.all)
        static hello = "你好";
        static isCat(arg) {
            if (arg.constructor === Cat) {
                return true;
            }
            return false;
        }

        // 在class中直接定义的变量 会 作为属性存储在实例化对象上   this.species = "猫"
        // species = "猫";

        // 动态方法 
        // 原型对象(prototype)的方法 在constructor之后直接写   给实例化对象用的 
        say() {
            console.log(this.name, this.color);
        }
        sayHello() {
            console.log("hello");
        }

    }
    // 如果希望将共有的属性存储在 原型对象prototype上,可以在class创建完成之后  手动赋值
    Cat.prototype.species = "猫";

    console.dir(Cat);
    var Tom = new Cat("Tom", "black");
    console.log(Tom);


    // 此处只是为了方便理解
    // Cat.prototype = {
    //     constructor() {
    //     },
    //     say() { },
    //     sayHello() { }
    // }







</script>

</html>